<route lang="json5">
{
  style: {
    navigationBarTitleText: '格知汇GACC',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="entire">
    <image
      style="z-index: -10; position: fixed; top: 0; width: 100vw; height: 100vh"
      :src="listBg"
      mode="aspectFill"
    />
    <view class="div1">
      <Backbar title="我的任务" :hide-back="true" />
      <!-- 一级选择器 -->
      <wht-tabs
        v-model="pageData.tab1"
        :list="pageData.tabList1"
        @change="handleTab1"
        bgColor="#e5effd"
        color="#898889"
        active-color="#254872"
        line-color="#254872"
        :font-size="26"
        :isRound="true"
        :padding="70"
      />
    </view>
    <view class="div2" :style="{ height: pageData.div2Height + 'px' }">
      <!-- 空显示 -->
      <view
        v-if="judgeNull"
        style="
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
        "
      >
        <image src="/static/images/icons/imgNone.png" style="width: 309rpx; height: 259rpx"></image>
      </view>
      <!-- 我的课程列表 -->
      <view v-if="pageData.courseList != null && pageData.tab1 === 1">
        <view v-for="(item, index) in pageData.courseList" :key="index" @click="navToTopic(item)">
          <TrainTopicItem :topic="item" />
        </view>
      </view>
      <!-- 我的认证列表 -->
      <view v-if="pageData.authList != null && pageData.tab1 === 0">
        <view v-for="(item, index) in pageData.authList" :key="index" @click="navToFundCert(item)">
          <CertificationItem :cert="item" />
        </view>
      </view>
      <!-- 我的直播列表 -->
      <scroll-view
        v-if="pageData.tab1 === 2"
        scroll-y="true"
        class="live-list"
        enable-flex="true"
        @scrolltolower="handleLiveScroll"
      >
        <view v-for="(item, index) in pageData.liveList" :key="index">
          <LiveCourseItem :course="item" />
        </view>
        <!--加载中，到底啦横幅-->
        <view style="margin-top: 30rpx; padding-bottom: 50rpx" v-if="pageData.liveList.length > 0">
          <wd-divider color="black">
            {{ pageData.liveLoading ? '加载中...' : '已经到底了' }}
          </wd-divider>
        </view>
      </scroll-view>
      <view style="height: 150rpx"></view>
    </view>
    <GzTabbar :active="2" />
  </view>
</template>

<script setup>
import TrainTopicItem from '@/components/CourseItem/TrainTopicItem.vue'
import CertificationItem from '@/components/CertificationItem/CertificationItem.vue'
import LiveCourseItem from '@/components/LiveCourseItem/LiveCourseItem.vue'
import { getCoursePlanList } from '@/service/stage/stage'
import { getLiveList } from '@/service/live/live'
import { listBg } from '@/static/imgMap'
import { iconCert } from '@/static/iconsMap'

const pageData = reactive({
  tab1: 0,
  tab2: 0,
  examTab: 0,
  startDate: null,
  endDate: null,
  examName: null,
  value: 0,
  tabList1: ['我的认证', '我的课程', '我的直播'],
  authList: [
    {
      picture: iconCert,
      title: '基础认证',
    },
  ],
  courseList: [],
  liveList: [],
  liveLoading: false,
  livePage: 1,
  liveLimit: 10,
  liveTotalCount: 0,
  div2Height: 0,
})

const handleTab1 = (index) => {
  console.log(index)
  pageData.tab1 = index
  if (index === 2 && pageData.liveList.length === 0) {
    fetchLiveList()
  }
}

// 判断列表为空显示
const judgeNull = computed(() => {
  if (pageData.tab1 === 0 && pageData.authList.length === 0) {
    return true
  }
  if (pageData.tab1 === 1 && pageData.courseList.length === 0) {
    return true
  }
  if (pageData.tab1 === 2 && pageData.liveList.length === 0) {
    return true
  }
  return false
})

onMounted(() => {
  // 自适应滑动列表长度
  uni.getSystemInfo({
    success(res) {
      const screenHeight = res.windowHeight
      console.log(screenHeight)
      uni
        .createSelectorQuery()
        .select('.div1')
        .boundingClientRect((data) => {
          pageData.div2Height = screenHeight - data.height
        })
        .exec()
    },
  })

  getCoursePlanList().then((res) => {
    pageData.courseList = res.data.map((item) => ({
      planId: item.planId,
      title: item.planName,
      picture: item.frontImage,
      total: item.courseCount,
      done: item.compCourseCount,
    }))
  })
})

// 获取直播列表
const fetchLiveList = async () => {
  pageData.liveLoading = true
  uni.showLoading()
  try {
    const response = await getLiveList({
      pageIndex: pageData.livePage,
      pageSize: pageData.liveLimit,
      isMayTask: true, // 获取我的直播传true
    })
    pageData.liveList = response.data.items
    pageData.liveTotalCount = response.data.totalCount
    pageData.livePage += 1
  } catch (error) {
    console.error('Error fetching live list:', error)
  } finally {
    pageData.liveLoading = false
    uni.hideLoading()
  }
}

// 加载更多直播
const loadMoreLiveList = async () => {
  if (pageData.liveLoading || pageData.liveTotalCount <= pageData.liveList.length) {
    return
  }

  pageData.liveLoading = true

  try {
    const response = await getLiveList({
      pageIndex: pageData.livePage,
      pageSize: pageData.liveLimit,
      isMayTask: true, // 获取我的直播传true
    })
    pageData.liveList.push(...response.data.items)
    pageData.livePage += 1
  } catch (error) {
    console.error('Error loading more live data:', error)
  } finally {
    pageData.liveLoading = false
  }
}

const handleLiveScroll = () => {
  if (!pageData.liveLoading) {
    loadMoreLiveList()
  }
}

// todo 我的任务 我的课程 详情加载逻辑还要确认
const navToTopic = (item) => {
  uni.navigateTo({
    url: '/pages-sub/trainTopic/trainTopicInfo3?data=' + encodeURIComponent(JSON.stringify(item)),
  })
}
const navToFundCert = (item) => {
  uni.navigateTo({
    url: '/pages-sub/myCertificate/fundCertificated',
  })
}
</script>

<style scoped lang="scss">
.entire {
  width: 100%;
  margin-bottom: 30rpx;
  .div1 {
    background-color: rgb(37, 73, 115);
    .title {
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgb(37, 73, 115);
      width: 100%;
      height: 120rpx;
      color: #fff;
      font-size: large;
    }
  }
  .div2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-y: scroll;

    .live-list {
      display: flex;
      flex-direction: column;
      width: 100%;
    }
  }
}
</style>
